<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="basePath" value="${pageContext.request.contextPath}"/>
<script src="${basePath}/js/printFields.js"></script>
<style>
    .tablestyle1 tr{
        height: 35px;
    }
    .tablestyle1 th{
        text-align: center;
        color: #0b76ac;
        font-weight: normal;
    }
</style>
<!--------------------------导入---------------------------->
<input type="hidden" id="volOrItem">
<div id="openSingeleImportSettingDataModel" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document" style='width:600px;'>
        <div class="modal-content">
            <div class="modal-header" <%--style="background: #455EC5;width: 100%"--%>>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">单件数据导入</h4>
            </div>
            <div class="modal-body">
                <form id="importSinForm" class="form-horizontal form-bordered form-row-strippe" data-toggle="validator" method="post">
                    <span>注意:仅支持.xls、.xlsx文件。</span>
                    <input type="file" id="input-file" name="file" accept=".xls,.xlsx" >
                    <div class="modal-footer">
                        <table id="mappingRealtions" class="table-bordered table-hover tablestyle1" style="text-align:center;width: 500px;">
                            <thead>
                                <tr>
                                    <th>当前Excel字段名</th>
                                    <th>数据库表字段</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </form>
                <button type="button" id="uploadExcel" onclick="getInputValue()" class="btn btn-primary">上传文件</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $('#openSingeleImportSettingDataModel').on('hide.bs.modal', function () {
            $("#mappingRealtions tbody").empty();
            $("#input-file").val("");
        });
    });
    //存放单件数据导入的映射字段
    var dataBaseImportFields={};
    function dataBaseAppendAction(){
        appendAappingRealtions();
    }
    function appendAappingRealtions() {
        for(var key in singleItemFields){
            $("#mappingRealtions tbody").append(
                "<tr>"+
                "<td style=\"text-align: center\"><input type=\"text\" id=\'"+singleItemFields[key].value+"\'/></td>"+
                "<td style=\"text-align: center\"><span>"+singleItemFields[key].text+"("+singleItemFields[key].value+")"+"</span></td>"+
                "<td style=\"text-align: center\"><a class=\"delPrint\" href=\"javascript:;\" onclick=\"deletePrintAction(\'"+singleItemFields[key].value+"\')\" data-toggle=\"tooltip\" title=\"清空\"><i class=\"glyphicon glyphicon-remove\"></i></a></td>"+
                "</tr>"
            );
        }
    }
    //删除本行
    function deletePrintAction(id){
      $("#"+id).val("");
    }

    /**
     * 点击上传时获取数据
     */
    function getInputValue(){
        var fileInput  = $("#input-file")[0].files[0];
        if(fileInput=="" || fileInput==undefined || fileInput=="undefined"){
            confirmEvent("请先在上方导入Excel!");
        }else {
            var detectionUse = [];
            $("#mappingRealtions tbody tr").each(function(i){
                var val = $(this).find("input").val();
                var attr = $(this).find("input").attr("id");
                if(val!="" && val!=undefined && val!="undefined"){
                    detectionUse.push(val);
                    dataBaseImportFields[attr]=val;
                }
            });
            if(detectionUse.length ==0){
                dataBaseImportFields={};
                confirmEvent("请填写映射字段!");
            }else {
                uploadExcelAction(dataBaseImportFields);
            }
        }
    }

    /**
     * 上传
     */
    function uploadExcelAction(dataBaseImportFields) {
        var length3 = Object.keys(dataBaseImportFields).length;
        if(length3 != 0){
            var file = $("#input-file")[0].files[0];
            var fd = new FormData();
            fd.append('dataBaseImportFields', JSON.stringify(dataBaseImportFields));
            fd.append('singleExcelFile', file);
            $.ajax({
                url: "${basePath}/pcwindow/singleImportExcel",
                type: 'POST',
                data: fd,
                async: false,//使用ajax上传文件时,必须添加同步sqync,保证文件流传输不断开
                processData: false,  //tell jQuery not to process the data
                contentType: false,  //tell jQuery not to set contentType
                //这儿的三个参数其实就是XMLHttpRequest里面带的信息。
                success: function (result) {
                    if (result == "success") {
                        $('#openSingeleImportSettingDataModel').modal('hide');
                        confirmEvent("上传成功");
                        $table.bootstrapTable('refresh');
                    } else {
                        confirmEvent(result);
                    }
                }
            })
        }else {
            confirmEvent('请先配置映射字段!');
        }
    }

</script>
